<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>微信支付页</title>
	<link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/weixinpay.css" />
</head>
<body>
<div id="app">
	<!--页面顶部-->
	<div id="nav-bottom" style="background: white;">
		<!--顶部-->
		<div class="nav-top">
			<div class="top">
				<div class="py-container" >
					<div class="shortcut">
						<ul class="fl">
							<li class="f-item">您好！</li>
							<li class="f-item">  请<a href="login.html" target="_blank" style="padding-left: 10px;">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
						</ul>
						<ul class="fr">
							<li class="f-item">我的订单</li>
							<li class="f-item space"></li>
							<li class="f-item">我的FM</li>
							<li class="f-item space"></li>
							<li class="f-item">FM会员</li>
							<li class="f-item space"></li>
							<li class="f-item">企业采购</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">网站导航</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部-->
			<div class="header" style="border-bottom: none;">
				<div class="py-container" style="background: white;">
					<div class="yui3-g Logo">
						<div class="yui3-u Left logoArea" style="padding-top: 40px;">
							<img src="img/logo.png" width="60" height="60" alt="" style="float:left; margin-right: 10px;">
							<div style="font-size: 28px; color: #2b2b2b; margin-top: 18px;">FM商城</div>
						</div>
						<div class="yui3-u Center searchArea" style="position: absolute; right: 238px; top: 30px;">
							<div class="search">
								<form action="" class="sui-form form-inline">
									<div class="input-append">
										<input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" />
										<a class="sui-btn btn-xlarge btn-danger" href="search.html">搜索</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--主内容-->
	<div class="cart py-container">
		<div class="checkout py-container  pay">
			<div class="checkout-tit">
				<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：1148532286879174656</span></h4>
				<span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{money}}</em>元</span>
				<div class="clearfix"></div>
			</div>
			<div class="checkout-steps">
				<div class="fl weixin">微信支付</div>
				<div class="fl sao">
					<div class="fl code">
						<div id="qrcode"></div>
						<div class="saosao">
							<p>请使用微信扫一扫</p>
							<p>扫描二维码支付</p>
						</div>
					</div>
					<div class="fl phone">

					</div>

				</div>
				<div class="clearfix"></div>
				<p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
			</div>
		</div>
	</div>
	<!--页面底部-->
	<div class="clearfix footer">
		<div class="py-container">
			<div class="footlink">
				<div class="Mod-service">
					<div class="mod_service" clstag="h|keycount|btm|btmnavi_null01">
						<div class="grid_c1 mod_service_inner">
							<ul class="mod_service_list">
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_duo">多</h5>
										<p class="mod_service_txt">品类齐全，轻松购物</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_kuai">快</h5>
										<p class="mod_service_txt">多仓直发，极速配送</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_hao">好</h5>
										<p class="mod_service_txt">正品行货，精致服务</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_sheng">省</h5>
										<p class="mod_service_txt">天天低价，畅选无忧</p>
									</div></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clearfix Mod-list">
					<div class="yui3-g">
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">购物指南</h5>
							<ul class="unstyled">
								<li>购物流程</li>
								<li>会员介绍</li>
								<li>生活旅行/团购</li>
								<li>常见问题</li>
								<li>购物指南</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">配送方式</h5>
							<ul class="unstyled">
								<li>上门自提</li>
								<li>211限时达</li>
								<li>配送服务查询</li>
								<li>配送费收取标准</li>
								<li>海外配送</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">支付方式</h5>
							<ul class="unstyled">
								<li>货到付款</li>
								<li>在线支付</li>
								<li>分期付款</li>
								<li>邮局汇款</li>
								<li>公司转账</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">售后服务</h5>
							<ul class="unstyled">
								<li>售后政策</li>
								<li>价格保护</li>
								<li>退款说明</li>
								<li>返修/退换货</li>
								<li>取消订单</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">特色服务</h5>
							<ul class="unstyled">
								<li>夺宝岛</li>
								<li>DIY装机</li>
								<li>延保服务</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<div class="mod_help_cover">
								<h5 class="mod_help_cover_tit">自营覆盖区县</h5>
								<div class="mod_help_cover_con">
									<p class="mod_help_cover_info">已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
									<p class="mod_help_cover_more">
										<a href="//help.jd.com/user/issue/103-983.html" target="_blank">查看详情
										</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="Mod-copyright">
					<ul class="helpLink">
						<li>关于我们<span class="space"></span></li>
						<li>联系我们<span class="space"></span></li>
						<li>联系客服<span class="space"></span></li>
						<li>合作招商<span class="space"></span></li>
						<li>商家帮助<span class="space"></span></li>
						<li>营销中心<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>销售联盟<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>隐私政策</li>
					</ul>
					<p>京公网安备 1****002000088号|京ICP证0*****9号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大1*****2号</p>
					<p>京ICP备0*****1号京公网安备1***********2</p>
				</div>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
			$(function(){
				$("ul.payType li").click(function(){
					$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
				})
			})
</script>
<script type="text/javascript" src="plugins/qrcode.min.js"></script>
<script type="text/javascript" src="plugins/vue/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="plugins/vue/axios-0.18.0.js"></script>
<script type="text/javascript" src="plugins/vue/qs.js"></script>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			money:0, //支付金额
			out_trade_no:'' //支付订单号
		},
		methods: {
			createNative: function () {
				var _this = this;
				axios.post("/pay/createNative.do")
						.then(function (response) {
							//显示订单号和金额
							_this.money= (response.data.total_fee/100).toFixed(2);
							_this.out_trade_no=response.data.out_trade_no;
							console.log(response.data);
							var qrcode = new QRCode(document.getElementById("qrcode"), {
								width : 250,
								height : 250
							});
							qrcode.makeCode(response.data.code_url);
							_this.queryPayStatus();//调用查询支付结果
						}).catch(function (reason) {
					console.log(reason);
				});
			},
			//调用查询
			queryPayStatus:function(){
				var _this = this;
				axios.get('/pay/queryPayStatus.do?out_trade_no='+_this.out_trade_no)
						.then(function (response) {
							if(response.data.success){
								location.href="paysuccess.html#?money="+_this.money;
							}else{
								if(response.data.message=='二维码超时'){
									this.createNative();//重新生成二维码
								}else{
									location.href="payfail.html";
								}
							}
						}).catch(function (reason) {
					console.log(reason);
				});
			}
		},
		created: function() {
			this.createNative();
		},
	});
</script>





</html>